<template>
  <div class="modadd">
    <van-nav-bar
      title="收货地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 内容 -->
    <div class="info">
      <div class="lable">
        <b>联系人</b>
        <input type="text" v-model="modinfo.name" placeholder="姓名" />
      </div>
      <div class="lable">
        <b></b>
        <div class="lable_s">
          <span>先生</span>
          <span>女士</span>
        </div>
      </div>
      <div class="lable">
        <b>电话</b>
        <input type="text" v-model="modinfo.phone" placeholder="手机号码" />
      </div>
      <div class="lable">
        <b>地址</b>
        <input
          type="text"
          v-model="modinfo.address"
          placeholder="请选择收货地址"
        />
      </div>
      <div class="lable">
        <b>补充说明</b> <input type="text" placeholder="例：5号楼203室" />
      </div>
      <div class="lable">
        <b></b>
        <div class="lable_s">
          <span>学校</span>
          <span>家</span>
          <span>公司</span>
        </div>
      </div>

      <div class="use">
        <span class="del" @click="request_address_del(modinfo)">删除</span>
        <span class="det" @click="request_address_edit(modinfo)">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { address_edit, address_del } from "../utils/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      modinfo: {
        address: "",
        phone: "",
        name: "",
      },
    };
  },
  mounted() {
    this.modinfo = JSON.parse(this.$route.params.addinfo);
    console.log(this.modinfo);
  },
  methods: {
    // 收货地址 - 编辑
    request_address_edit(payload) {
      var userid = JSON.parse(localStorage.getItem("userinfo")).id;
      address_edit({
        userid,
        addressid: payload.id,
        address: payload.address,
        phone: payload.phone,
        name: payload.name,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast.success("修改成功");
          // this.$router.push('/address')
          this.$router.push("/address");
        } else {
          Toast.fail("修改失败");
        }
      });
    },
    // 收货地址 - 删除
    request_address_del(payload) {
      var userid = JSON.parse(localStorage.getItem("userinfo")).id;
      address_del({ userid, addressid: payload.id }).then((res) => {
        if (res.data.code == 200) {
          Toast.success("删除成功");
          this.$router.push("/address");
        } else {
          Toast.fail("删除失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  margin: 10px 0;
}
.lable {
  height: 50px;
  display: flex;
  border-bottom: 1px solid #eee;
  line-height: 50px;
  b {
    font-weight: 600;
    width: 80px;
    padding: 0 10px;
    color: #777;
  }
  input {
    flex: 1;
    border: 0;
    outline: none;
    color: rgba(124, 124, 124, 0.737);
    font-size: 14px;
  }
}
.lable_s span {
  border: 1px solid #777;
  padding: 3px 15px;
  margin: 0 8px;
  border-radius: 5px;
  font-size: 14px;
}
.use {
  height: 40px;
  width: 95%;
  margin: auto;
  span {
    display: inline-block;
    text-align: center;
    color: #fff;
    line-height: 40px;
    margin: 10px;
    border-radius: 5px;
    width: 40%;
  }
  .del {
    background-color: #d9644c;
  }
  .det {
    background-color: #4bd964;
  }
}
</style>